<template>
	<view class="search-com">
		
		<view class="search-box">
			<input :focus="isFocus" class="search-input" v-model="keyWords" @confirm="clickSearch" placeholder-class="placeholder-style"
				:placeholder="placeholder" :disabled="disabled"/>
			<view class="search-btn yuan-btn iconfont" @click="clickSearch">&#xe602;</view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import {onMounted, ref,nextTick } from 'vue';
	const props = defineProps({
		placeholder: { type: String, default: '搜索名称' },
		isFocus:{ type: Boolean, default: false },
		disabled:{ type: Boolean, default: false }
	})
	const keyWords = ref('')
	const emit = defineEmits(["clickSearch"])
	const clickSearch = () => {
		emit('clickSearch', keyWords.value)
	}
	
	onMounted( async () => {
		
	})
	
	
	
</script>

<style lang="scss">
	.search-com {
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.search-box {
			display: flex;
			background-color: #fff;
			padding: 10rpx 20rpx;
			align-items: center;
			border-radius: 60rpx;
			flex-grow: 1;
		}

		.search-ico {
			font-size: 28rpx;
			color: #999;
			margin-right: 15rpx;
			width: 50rpx;
			height: 50rpx;
		}

		.search-input {
			font-size: 26rpx;
			color: #666;
			flex-grow: 1;
		}

		.search-btn {
			font-size: 38rpx;
			width: 120rpx;
			color: #fff;
			background-color: #fff;
			height: 56rpx;
			border-radius: 60rpx;
			background-color: #3AD3C1;
		}
	}
</style>